<template>
  <div>
    <p>学员列表</p>
    <el-table
      ref="multipleTable"
      :data="myarr"
      style="width: 100%; padding-left: 30px"
      @selection-change="handleSelectionChange"
     
    >
      <el-table-column type="selection" width="80" align="center" />
      <el-table-column type="index" label="排序" width="60" align="center" />
      <el-table-column
        prop="userid"
        label="用户ID"
        width="120"
        align="center"
      />
      <el-table-column
        prop="wechat"
        label="微信昵称"
        width="100"
        align="center"
      />
      <el-table-column prop="tel" label="会员手机" width="150" align="center" />
      <el-table-column prop="pay" label="消费金额" width="120" align="center" />
      <el-table-column
        prop="order"
        label="订单数量"
        width="120"
        align="center"
      />
      <el-table-column
        prop="level"
        label="会员等级"
        width="120"
        align="center"
      />
      <el-table-column label="上次消费时间" width="230" align="center">
        <!--作用域插槽 template空标签 scope.row当前行数据  scope.row.date当前行的date-->
        <template slot-scope="scope">
          <i class="el-icon-timer" />
          <span style="margin-left: 5px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="禁用账户"
        prop="contractType2"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          <el-switch
            :value="scope.row.contractType2"
            active-color="rgb(102, 204, 255)"
            inactive-color="#ff4949"
            @input="changContractType(scope.row)"
          />
          <span v-show="scope.row.ClueType == '--'">{{
            scope.row.ClueType
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.userid)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { deleteByIdApi, bachtDeleeApi } from "../../../api/studentApi";
import eventBus from "../../../utils/eventBus";
export default {
  props: ["myarr"],
  data() {
    return {
      contractType2: false,
      multipleSelection: [], // 就是双向绑定checkbox  集合数组
    };
  },
  mounted() {
    eventBus.$on("batchtranfer", this.bathDeletefun); // 添加自定义事件
  },
  methods: {
    changContractType(row) {
      this.$confirm("确定改变", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          row.contractType2 = !row.contractType2;
          this.$message({ type: "success", message: "修改成功!" });
        })
        .catch(() => {
          this.$message({ type: "info", message: "已取消修改！" });
        });
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    bathDeletefun() {
      // 批量删除
      console.log("批量");
      // 获取选中的所欲id，发送请求给后端，后端逻辑处理，通知前端操作成功，前端刷新表格
      // 多个id值如何传递后端，数组，一般传递对象比较多
      // 把多个id 拼接成 , 分隔的字符串，然后传递对象过去
      var idArr = this.multipleSelection.map((item) => item.userid);
      var ids = idArr.join(",");
      bachtDeleeApi({ ids: ids }).then((res) => {
        // console.log('res', res)
        if (res.code == 200) {
          this.$emit("resetTable"); // 刷新表格
        }
      });
    },
    handleEdit(row) {
      this.$emit("opendialogfun", row);
    },
    handleDelete(id) {
      // 删除逻辑，发送请求把id传送给后端，后端删除逻辑，然后通知前端，前端刷新表格
      // 删除，批量删除，添加，修改，请求都不用返回数据，只需要后台通知我们删除成功就可以。
      // 删除操作之后，我们从新在查询一次就ok了。
      // 发送请求 传递id值
      deleteByIdApi({ userid: id }).then((res) => {
        // console.log(res)
        if (res.code == 200) {
          this.$emit("resetTable"); // 刷新表格
        }
      });
    },
    handleOpen(row) {
      //   openByIdApi({ userid: id }).then((res) => {
      //     console.log(res)
      //     if (res.code == 200) {
      //       this.$emit('resetTable') // 刷新表格
      //     }
      //   })
      this.$emit("opena", row);
    },
  },
};
</script>

<style scoped rel="stylesheet/scss" lang="scss">
p {
  background-color: #fff;
  padding: 18px 0px 18px 30px;
  font-weight: 600;
  margin-bottom: 0px;
}
</style>
